/**
 * 轮盘组件
 */

import { useEffect, useRef, useState } from "react";
import { WheelDiskProp } from ".";

const WheelDisk: React.FC<WheelDiskProp> = ({
  defaultRotate,
  debug = false,
  onHoverEvent,
  onActiveChange,
  segmentList,
}) => {
  const showArea = useRef(null);
  const [rotateWheel, setRotateWheel] = useState(defaultRotate);
  const [largeIndex, setLargeIndex] = useState(3);
  const wheelTimeout = useRef(null); // 用于存储定时器
  /**
   * 向左点击响应事件
   */
  const handleLeftClick = (e: number) => {
    let calcIndex = largeIndex - e,
      tmpIndex = calcIndex < 0 ? segmentList.length + calcIndex : calcIndex;
    setLargeIndex(tmpIndex);
    setRotateWheel(rotateWheel + 20 * e);
  };
  /**
   * 向右点击响应事件
   */
  const handleRightClick = (e: number) => {
    let tmpIndex =
      largeIndex + e > segmentList.length - 1
        ? largeIndex + e - segmentList.length
        : largeIndex + e;
    setLargeIndex(tmpIndex);
    setRotateWheel(rotateWheel - 20 * e);
  };

  /**
   * 卡片点击事件
   */
  const handleCardClick = (e: number) => {
    if (e < largeIndex) {
      // 点击了左侧的
      handleLeftClick(largeIndex - e);
    } else {
      // 点击了右侧的
      handleRightClick(e - largeIndex);
    }
  };

  useEffect(() => {
    onActiveChange(largeIndex);
  }, [largeIndex]);

  /**
   * 滚轮触发时调用的主方法
   * @param index
   */
  const handleWheel = (index: number) => {
    // 清除之前的定时器
    if (wheelTimeout.current) {
      clearTimeout(wheelTimeout.current);
    }
    // 设置新的定时器，检测滚动停止
    // @ts-ignore
    wheelTimeout.current = setTimeout(() => {
      handleCardClick(index); // 当滚动停止时触发的另一个方法
    }, 50); // 延迟时间可以根据需求调整
  };

  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
      }}
    >
      {debug && (
        <>
          <div style={{ display: "flex" }}>
            <button onClick={() => setRotateWheel(rotateWheel - 1)}>
              向左加一度
            </button>
            <button onClick={() => setRotateWheel(rotateWheel + 1)}>
              向右加一度
            </button>
            <button onClick={() => handleLeftClick(1)}>向左转</button>
            <button
              onClick={() => {
                handleLeftClick(7);
              }}
            >
              向左转*7
            </button>
            <button onClick={() => handleRightClick(1)}>向右转</button>
            <button onClick={() => handleRightClick(7)}>向右转*7</button>
          </div>
          <h1>当前度数：{rotateWheel}</h1>
        </>
      )}
      <div
        ref={showArea}
        onWheelCapture={(e) => {
          if (e.deltaY > 0) {
            handleWheel(largeIndex + 1);
          } else {
            handleWheel(largeIndex - 1);
          }
        }}
        style={{
          width: "800px",
          height: "280px",
          overflow: "hidden",
          border: "1px solid red",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "800px", // 圆的直径
            width: "800px",
            border: "1px solid red",
            borderRadius: "50%",
            position: "relative",
            marginTop: "40px",
          }}
        >
          <div
            style={{
              position: "absolute",
              width: "100%",
              height: "100%",
              borderRadius: "50%",
              transform: `rotate(${rotateWheel}deg)`,
              transition: "all 350ms",
            }}
          >
            {segmentList.map((item, index) => {
              const angle = index * (360 / segmentList.length); // 计算每个div的角度
              return (
                <div
                  key={index}
                  onMouseEnter={() => onHoverEvent(index)}
                  style={{
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    width: "0",
                    height: "0",
                    transformOrigin: "0 0",
                    transition: "all 200ms linear .0s",
                    transform: `
                    rotate(${angle}deg) /* 每个元素旋转到对应角度 */
                    translateX(400px) /* 将div移动到圆周边缘 */
                  `,
                  }}
                >
                  <div
                    onClick={() => handleCardClick(index)}
                    style={{
                      width: "50px",
                      height: `${largeIndex == index ? 50 : 30}px`,
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
                      background: `${largeIndex === index ? "rgba(0,255,0,0.5)" : "rgba(255,0,0,0.5)"}`,
                      color: "white",
                      transition: "all 200ms linear .0s",
                      transitionTimingFunction: "ease-out",
                      transform: `translate(-50%, -50%) rotate(${-angle - rotateWheel}deg)`, // 调整div中心点
                      borderRadius: "5px",
                    }}
                  >
                    {item}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};
export { WheelDisk };
